<template>
  <div @contextmenu.prevent="">
  <!-- 上一页 -->
  <div class="pre_page page_bar pointer" v-show="viewType == 'page'">
    <div class="page_btn fa fa-chevron-left" @click="prePage">
       <i class="el-icon-arrow-left"></i>
    </div>
  </div>
  <!-- 下一页 -->
  <div class="next_page page_bar pointer" v-show="viewType == 'page'">
    <div class="page_btn fa fa-chevron-right" @click="nextPage">
       <i class="el-icon-arrow-right"></i>
    </div>
  </div>
  <!-- 页码 -->
  <div class="num_bar" v-show="viewType == 'page'">
    <el-select v-model="pageNum" placeholder="请选择">
      <el-option v-for="index in pageTotalNum" :key="index" :label="'第' + index + '页，' + '共' + pageTotalNum + '页'" :value="index">
      </el-option>
    </el-select>
  </div>
  <div class="num_bar" style="right: 20px;" v-show="viewType == 'scroll'">
    <el-tag>第 {{ nowScrollPage }} 页</el-tag>
  </div>
  <!-- 工具按钮 -->
  <div class="tools_bar">
    <div v-show="viewType == 'scroll'">
      <el-button plain icon="el-icon-document-copy" circle @click="pageView()"></el-button>
    </div>
    <div v-show="viewType == 'page'">
      <el-button plain icon="el-icon-tickets" circle @click="scrollView()"></el-button>
    </div>
    <div class="mt30">
      <el-button plain icon="el-icon-plus" circle @click="zoomPDF('plus')"></el-button>
    </div>
    <div class="mt10">
      <el-button plain icon="el-icon-minus" circle @click="zoomPDF('minus')"></el-button>
    </div>
    <!-- <div class="mt10">
      <el-button type="primary" plain icon="el-icon-download" circle @click="downSop"></el-button>
    </div> -->
  </div>

  <div :style="{width: pdfWidth + '%',marginLeft: pdfLeft + '%',marginTop: pdfTop + '%',marginBottom: pdfBottom + '%'}" style="transition: all .3s">
    <pdf v-if="viewType == 'page'" :page="pageNum" :src="url" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event"></pdf>
    <div v-if="viewType == 'scroll'">
      <pdf ref="pdf" v-for="i in pageNum" :key="i" :src="url" :page="i"></pdf>
    </div>
  </div>
</div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf,
  },
  data () {
    return {
      url: '',
      pageNum: 1,
      pageTotalNum: 1,
      pdfWidth: 60,
      pdfLeft: 20,
      pdfTop: 2,
      pdfBottom: 2,
      loadedRatio: 0,
      pdfDialog: false,
      canDownPDF: false,
      downPDFCode: '',
      viewType: 'page',
      clientHeight: 1,
      nowScrollPage: 1 
    }
  },
   mounted() {
    if(this.$route.query.url){
      const {query}=this.$route
      this.url=query.url
    }
    window.addEventListener('scroll',this.setScrollPage,true)
    this.keyDown()//键盘监听
  },
  methods:{
       // 设置滚动页码
    setScrollPage() {
      let scrollTop = document.documentElement.scrollTop;
      let scrollHeight = document.documentElement.scrollHeight;
      this.nowScrollPage = Math.ceil(this.pageTotalNum * (scrollTop  / scrollHeight));
    },
    // 滚动浏览
    scrollView() {
      this.viewType = 'scroll'
      this.pageNum = this.pageTotalNum
    },
    // 分页浏览
    pageView() {
      this.viewType = 'page'
      this.pageNum = 1;
    },
     zoomPDF(method) {
      const _this = this;
      if (method === 'plus') {
        if (_this.pdfWidth === 100) {
          _this.$message({
            showClose: true,
            message: '已放大至：100%',
            type: 'info',
          });
        } else {
          _this.pdfWidth = _this.pdfWidth + 10
          _this.pdfLeft = (100 - _this.pdfWidth) / 2
        }
      }
      if (method === 'minus') {
        if (_this.pdfWidth === 10) {
          _this.$message({
            showClose: true,
            message: '已缩小至：10%，不可再缩小。',
            type: 'info',
          });
        } else {
          _this.pdfWidth = _this.pdfWidth - 10
          _this.pdfLeft = (100 - _this.pdfWidth) / 2
        }
      }
    },
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
      window.scrollTo(0, 0);
    },

    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
      window.scrollTo(0, 0);
    },
     keyDown() {
        document.onkeydown =  (e) => {
          //事件对象兼容
          let e1 = e || window.event || arguments.callee.caller.arguments[0]
          //键盘按键判断:左箭头-37;右箭头-39;
          if (e1 && e1.keyCode == 37) {
            // 按下左箭头
            this.prePage()
          } else if (e1 && e1.keyCode == 39) {
            // 按下右箭头
            this.nextPage()
          }
        }
      },
  }

}
</script>
<style lang='scss' scoped>
.tools_bar {
  position:fixed;
  bottom: 10px;
  right: 110px;
  z-index:1000;
}

.num_bar {
  width:160px;
  position:fixed;
  top: 100px;
  right: 110px;
  z-index:1000;
}

.page_bar {
  display: table;
  width: 100px;
  height:100%;
  background:#ddd;
  opacity:0.7;
  z-index:100;
}

.page_btn {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  font-size: 50px;
  color:#999;
  z-index:1000;
}

.page_bar:hover {
  opacity:1;
}

.pre_page {
  top: 0;
  left: 180px;
  position:fixed;
}

.next_page {
  top: 0;
  right: 0;
  position:fixed;
}
</style>